<template>
  <div id="cluereport">
    <el-dialog
      :title="dialogtitle"
      :visible.sync="dialogVisible"
      width="98%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false">
      <personDetail @dialogHide="dialogHide($event)" :unitId="unitId" addType="approval" :personId="personId" :approvalId="approvalId" :readOnly="readonly" :timestamp="timestamp"></personDetail>
    </el-dialog>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/salary/' }">工资管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{unitName}}</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxs">
    <!--工具条-->
      <el-form :inline="true" :model="filters">
        <div style="padding:10px">
          <el-radio-group v-model="showType" @change="changeType">
            <el-radio-button label="待审批" border>
            </el-radio-button>
            <el-radio-button label="在任人员" border>
            </el-radio-button>
            <el-radio-button label="全部人员" border>
            </el-radio-button>
          </el-radio-group>
        </div>
      </el-form>
    </section>
    <section class="wboxd" style="margin-top:10px">
      <!--列表-->
      <div v-show="showType==='待审批'">
        <el-table :data="approvalList" highlight-current-row v-loading="listLoading" style="width: 100%;" :height="tableHeight" border
          ref="multipleTable"
          >
          <el-table-column type="index" label="序号" width="50" fixed align="center" class-name="tableth">
          </el-table-column>
          <el-table-column prop="realName" label="姓名" width="80" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="jobDate" label="参加工作时间" width="150" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              {{formatDate(scope.row.jobDate)}}
            </template>
          </el-table-column>
          <el-table-column prop="salaryDate" label="工资变动时间" width="150" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              {{formatDate(scope.row.salaryDate)}}
            </template>
          </el-table-column>
          <el-table-column prop="jobClass2" label="岗位类别" width="150" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="jobLevel2" label="岗位等级" width="150" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.jobClass2==='专业技术岗位'">专业技术{{ scope.row.jobLevel2 }}</span>
              <span v-else-if="scope.row.jobClass2==='管理岗位'">管理{{ scope.row.jobLevel2 }}</span>
              <span v-else>{{ scope.row.jobLevel2 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="salaryLevel2" label="工资薪级" width="150" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="reason" min-width="200" label="变动原因" header-align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              {{fReasonText(scope.row.reason)}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button @click="showApproval(scope.row.id)" size="mini" style="color:#000 !important;margin:10px 0 10px 5px">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination style="float:right" :total="totalnum" :page-size="pageSize" @current-change="handleCurrentChange" :current-page="pageNum" @size-change="handleSizeChange" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
      </div>
      <div v-show="showType!=='待审批'">
        <el-table :data="list" highlight-current-row v-loading="listLoading" style="width: 100%;" :height="tableHeight" border>
          <el-table-column type="index" label="序号" width="50" align="center" class-name="tableth">
          </el-table-column>
          <el-table-column prop="realname" label="姓名" width="80" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="realname" key="state" label="任职状态" width="85" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.state===2" style="color:red !important;font-weight:bolder">不在任</span>
              <span v-else style="color:green !important;font-weight:bolder">在任</span>
            </template>
          </el-table-column>
          <el-table-column align="center" v-for="item in yearList" :key="'year'+item" :prop="'year'+item" :label="''+item+'年'">
            <template slot-scope="scope" v-if="scope.row.approvalList">
              <el-tooltip
                v-for="it in scope.row.approvalList.filter(approval=>approval.theYear===item)"
                :key="'approval'+it.id"
                :open-delay="600"
                class="item"
                effect="dark"
                :content="(it.theType===1?'审批':'备案')+' '+stateList.find(state=>state.value===it.state).label">
                <el-button :type="stateList.find(state=>state.value===it.state).type" size="mini" round :icon="it.theType===1?'el-icon-s-claim':'el-icon-s-cooperation'" style="margin:5px;color:#fff !important" @click="showApproval(it.id)" ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </section>
  </div>
</template>

<script>
// import personDetail from './Detail'
import personDetail from './edit'
export default {
  components: {
    personDetail
  },
  data () {
    return {
      approvalId: null,
      reasonList: [
        {
          label: '审批',
          options: [{
            value: 11,
            label: '新提任副局级干部'
          }, {
            value: 12,
            label: '现任局级干部变更工资序列'
          }, {
            value: 13,
            label: '现任局级干部从企业或原执行公务员工资序列单位调入部直属事业单位'
          }]
        }, {
          label: '备案',
          options: [{
            value: 21,
            label: '局级干部年度晋升工资薪级'
          }, {
            value: 22,
            label: '因享受劳模待遇高定工资薪级'
          }, {
            value: 23,
            label: '因受处分、被采取强制措施或受行政、刑事处罚需要低定工资'
          }, {
            value: 24,
            label: '因岗位等级晋升需要晋升基本工资'
          }]
        }
      ],
      approvalList: [],
      stateList: [
        {label: '未提交', value: 0, type: 'info'},
        {label: '已提交 ', value: 1, type: 'primary'},
        {label: '审批通过', value: 2, type: 'success'},
        {label: '退回', value: 3, type: 'danger'}
      ],
      yearList: [],
      state: 1,
      unitName: '',
      unitId: null,
      webDataDialogVisible: false,
      dataUrl: this.$http.defaults.youngAPI + `api/busFormalPerson/queryAll`,
      dataPara: {},
      xboptions: [],
      shfloptions: [],
      lyfloptions: [],
      pysyjylxoptions: [],
      showCksj: false,
      showType: '待审批',
      moreShow: false,
      exportLoading1: false,
      cllxDic: [],
      wtlyDic: [],
      cljdjgDic: [],
      yxqDic: [],
      roleAdmin: true,
      roleEdit: true,
      roleChart: true,
      settype: '',
      setAuthText: '',
      roleSubmitLoading2: false,
      isIndeterminate2: false,
      roleSubmitLoading: false,
      role: [],
      checkAll2: false,
      checkAll: false,
      isIndeterminate: false,
      setRole: false,
      setrole0: false,
      // roles: [{label: '查看', value: 1}, {label: '编辑', value: 2}, {label: '分析', value: 3}],
      roles: ['查看', '编辑', '分析'],
      roles2: [],
      roleuser: [],
      userlist: [],
      processId: '',
      drawer: false,
      authUser: '',
      timestamp: '',
      noRoleCode: '***',
      noRoleText: '***',
      filters: {
        sscs: null,
        dwmc: '',
        sfzh: '',
        xb: '',
        xm: '',
        zt: 0
      },
      listLoading: false,
      ids: [],
      tableHeight: 100,
      list: [
      ],
      pageNum: 1,
      pageSize: 20,
      totalnum: null,
      personId: 0,
      dialogtitle: '新增',
      dialogVisible: false,
      readonly: false,
      total: 0,
      Isace: 'asc',
      Sortkey: '',
      changeSizeFlag: false,
      myloading: false,
      sscsArr: [],
      totalPage: 0,
      orderloading: false
    }
  },
  methods: {
    fReasonText (value) {
      let reasonText = ''
      let val = parseInt(value)
      if (val) {
        this.reasonList.forEach(item => {
          if (item.options.find(it => it.value === val)) {
            reasonText = item.label + ':' + item.options.find(it => it.value === val).label
          }
        })
      }
      return reasonText
    },
    formatDate (str) {
      if (str.length === 6) {
        return str.slice(0, 4) + '.' + str.slice(4, 6)
      } else {
        return str.slice(0, 4) + '.' + str.slice(4, 6) + '.' + str.slice(6, 8)
      }
    },
    dialogHide (flag) {
      this.changeType()
      if (flag) {
        this.dialogVisible = false
      }
    },
    handleSizeChange (val) {
      this.changeSizeFlag = true
      this.pageNum = 1
      this.pageSize = val
      this.getApprovalList()
    },
    handleCurrentChange (val) {
      if (this.changeSizeFlag === false) {
        this.pageNum = val
        this.getApprovalList()
      }
    },
    getPersonList () {
      let para = {
        state: this.state,
        unitId: this.unitId,
        isAdmin: true
      }
      this.listLoading = true
      this.$http
        .post(this.$http.defaults.salaryAPI + `api/salaryBusPerson/listPersons`, para)
        .then(response => {
          if (response.data.success) {
            this.listLoading = false
            this.list = response.data.result
            this.yearList = []
            response.data.result.forEach(element => {
              if (element.approvalList && element.approvalList.length > 0) {
                element.approvalList.forEach(ele => {
                  if (!this.yearList.includes(ele.theYear)) {
                    this.yearList.push(ele.theYear)
                  }
                })
              }
            })
            this.yearList.sort((a, b) => b - a)
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    getApprovalList () {
      let para = {
        state: 1,
        unitId: this.unitId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      this.listLoading = true
      this.$http
        .post(this.$http.defaults.salaryAPI + `api/salaryBusApproval/queryByPage`, para)
        .then(response => {
          if (response.data.success) {
            this.listLoading = false
            this.approvalList = response.data.result.records
            this.totalnum = response.data.result.total
            this.changeSizeFlag = false
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    showApproval (approvalId) {
      this.readonly = true
      this.dialogtitle = '查看'
      this.approvalId = approvalId
      this.dialogVisible = true
      this.addType = 'approval'
      this.timestamp = new Date().getTime()
    },
    getUnitDetails () {
      this.$http
        .get(this.$http.defaults.salaryAPI + `api/salaryBusUnit/getById?id=` + this.unitId)
        .then(response => {
          if (response.data.success) {
            this.unitName = response.data.result.name
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    changeType () {
      if (this.showType === '待审批') {
        this.getApprovalList()
      } else {
        this.state = this.showType === '在任人员' ? 1 : null
        this.getPersonList()
      }
      this.tableresize(this)
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      let myheight = this.showType === '待审批' ? 260 : 220
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - myheight
      })
    }
  },
  mounted () {
    this.unitId = this.$route.query.unitId
    this.getUnitDetails()
    this.changeType()
    this.tableresize(this)
    window.onresize = () => {
      this.tableresize(this)
    }
  }
}
</script>
<style>
#cluereport .el-drawer__wrapper{
  width: 100%;
  height: 100%;
  position: fixed !important;
  overflow: hidden;
}
  .wboxd .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  }
  .wboxd .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体'
  }
  .tableth{
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    height:33px;
  }
  #testlist .wboxs{
    height:45px;
    padding-top:10px;
  }
  #cluereport .el-table td{
    border-right: 1px solid #95B8E7;
    border-bottom: 1px solid #95B8E7;
  }
</style>
<style scoped>
  #cluereport .el-button{
    color:#fff !important;
  }
  #cluereport h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  .el-pagination{
    float: left;
    padding:7px 10px;
  }
  #cluereport .wboxs{
    width: 100%;
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
    padding:0;
  }
  .wboxd{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
</style>
